<template>
  <div>
    <!-- 首页轮播图的结构 -->
    <Carousel />
    <!-- 首页搜索医院的表单区域 -->
    <Search />
    <el-row gutter="20">
      <el-col :span="20">
        <Level @getLevel="getLevel" />
        <Region @getRegion="getRegion" />
        <div class="hospital" v-if="hasHospitalArr.length > 0">
          <Card class="item" v-for="(item, index) in hasHospitalArr" :key="index" :hospitalInfo="item"></Card>

        </div>
        <el-empty v-else description="没有医院"></el-empty>
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
          :background="true" layout=" prev, pager, next, jumper,->,sizes,total" :total="total"
          @current-change="currentChange" @size-change="sizeChange" />
      </el-col>
      <el-col :span="4">
        <Tip></Tip>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reqHospital } from '@/api/home'
import Tip from '@/page/home/tip/index.vue'
//引入首页轮播图组件
import Carousel from "./carousel/index.vue";
//引入首页搜索的组件
import Search from "./search/index.vue";
// 引入首页等级的组件
import Level from "./level/index.vue";
// 引入首页地区选择的组件
import Region from "./region/index.vue";
import Card from './card/index.vue'
import { ref, onMounted } from 'vue'
import type { Content, HospitalResponseData } from "@/api/home/type";
let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
//存储已有的医院的数据
let hasHospitalArr = ref<Content>([]);
let total = ref<number>(0)
//存储医院的等级相应数据
let hostype = ref<string>("");
//存储医院的地区
let districtCode = ref<string>("");

onMounted(() => {
  getHospitalInfo()
})

const getHospitalInfo = async () => {
  const res: HospitalResponseData = await reqHospital(
    pageNo.value,
    pageSize.value,
    hostype.value,
    districtCode.value
  );
  if (res.code === 200) {
    hasHospitalArr.value = res.data.content
    total.value = res.data.totalElements
  }
}

// 分页器页码变化时触发
const currentChange = () => {
  getHospitalInfo()
}

// 分页器下拉菜单变化时触发
const sizeChange = () => {
  pageNo.value = 1
  getHospitalInfo()
}

// 子传父
const getLevel = (level: string) => {
  hostype.value = level
  getHospitalInfo()

}
const getRegion = (region: string) => {
  districtCode.value = region
  getHospitalInfo()
}
</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 10px 0;
  }

}
</style>